// ----------------------------------整体页面样式
body {
    // flexible.js只是划分为10等份，但没有限制宽度范围，需要自己限制
    // 单位必须用px固定写死，因为rem是可变的，它结合margin-auto不能实现居中
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    // 若使用cssrem插件，记得修改cssroot的font-size大小
    // 即：1rem = 750px / 10 = 75px
    // 设计稿宽度750px划分为10等份，故10rem
    width: 10rem;
    background: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

// -----------------------------------通用样式
a {
    text-decoration: none;
    font-size: .3333rem;
}

// -----------------------------------修改html的字体大小
// 屏幕宽度>=750px时，按照750px设计稿走
// flexible.js全部都是根据视口宽度调整的，但我们需要的是：
// 视口宽度>=750px时，使用750px设计稿；视口宽度<=750px时，才使用flexible.js的
@media screen and (min-width: 750px) {
    html {
        // 注意权重
        font-size: 75px!important;
    }
}

// ----------------------------------顶部搜索栏
// div {    // 写成【div标签选择器】会影响【子容器.search】布局的
.search-box {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 1.1733rem;
    background-color: #ffc001;
    .classify {
        width: .5867rem;
        height: .9333rem;
        margin: .1467rem .3333rem .1333rem;
        background: url(../images/classify.png) no-repeat;
        background-size: .5867rem .9333rem;
    }
    .search {
        flex: 1;
        input {
            width: 100%;
            height: .88rem;
            margin-top: .1333rem;
            border: 0;
            padding-left: .7333rem;
            background-color: #fef0c7;
            color: #72726f;
            font-size: .3333rem;
            border-radius: .44rem;
            outline: none;
        }
    }
    .login {
        width: 1rem;
        height: .9333rem;
        margin: .1333rem;
        color: #fff;
        font-size: .3333rem;
        text-align: center;
        line-height: .9333rem;
    }
}